<#import "/includes/layout.html" as defaultLayout>
	<@defaultLayout.layout>
		<div class="layui-fluid">
			<div class="layui-card">
				<div class="layui-card-header layuiadmin-card-header-auto">
					<form id="searchForm" class="layui-form" lay-filter="searchForm">
						<div class="layui-form-item">
							<div class="layui-inline">
								<div class="layui-input-inline">
									<input class="layui-input" name="title" autocomplete="off" placeholder="输入关键字" />
								</div>
							</div>
							<div class="layui-inline">
								<button class="layui-btn" lay-submit lay-filter="searchForm"><i
										class="layui-icon layui-icon-search layuiadmin-button-btn"></i>查询</button>
								<button type="button" class="layui-btn layuiadmin-btn-list layui-btn-primary"
									data-type="clean">
									<i class="layui-icon layui-icon-refresh layuiadmin-button-btn"></i>重置</button>
							</div>
						</div>
					</form>
				</div>
				<div class="layui-card-body">
					<div id="main" class="main"></div>
				</div>
			</div>
		</div>
		<style type="text/css">
			.main {
				height: 400px;
				/*width: 778px !important;*/
				overflow: hidden;
				padding: 10px;
				margin-bottom: 10px;
				border: 1px solid #e3e3e3;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				border-radius: 4px;
				-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
				-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
				box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
			}
		</style>
		<script src="${_context}/static/echarts/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var myChart = echarts.init(document.getElementById('main')); //  初始化
			var option = {
				title: { text: '${chart.title}' },
				tooltip: {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				legend: {
					orient: 'vertical',
					left: 'left',
					data: ${ chart.legend }
	    		},
				series : [
					{
						name: '${chart.title}',
						type: 'pie',
						radius : '55%',
						center: ['50%', '60%'],
						data:[
							<#list chart.series as s>
							{value:${s.data}, name:'${s.name}'}<#if s_has_next >,</#if>
							</#list >
						],
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			};
			myChart.setOption(option);            
		</script>
	</@defaultLayout.layout>